<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/music_style.css" rel="stylesheet"/> 
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <input type="text" v-model="queryname" @keyup.enter="getResult" class="search" placeholder="请输入歌手或歌曲名字~"/>
            <button type="button" @click="getResult">搜索</button>
        </div>
        <div class="container">
            <div class="sidebar">
                <ul class="uul">
                    <li v-for="(item,index) in resultlist.songs" @click="getMusic_url(item.id);getPic(item.id);getComment(item.id);">
                        {{index+1}}.&nbsp;{{item.name}}——{{item.artists[0].name}} &nbsp;&nbsp;<i class="mv" v-if="item.mvid>0" @click="openMv(item.mvid)">mv</i>
                    </li>
                    <!-- <li>bbb</li>
                    <li>ccc</li> -->
                </ul>
            </div><div class="content">
                <div class="fengmian" :class="{xuanzuan:isPlaying}" :style="{'backgroundImage':'url('+music_img+')'}">
                        
                </div>
                <audio id="audio" class="au" @play="play" @pause="pause" :src="music_url" controls></audio>
            </div><div class="chatboard">
                <div><strong>热门留言/查看最新</strong></div>
                <div class="commentOne">    
                    <!-- <div class="chatP">
                        <div class="chatL">头像</div>
                        <div class="chatR">
                            <p>名字</p>
                            <p>内容撒旦发的啊手动阀家
                                里的房间啊啊手动阀手动
                                阀手动阀手动阀
                            </p>
                        </div>
                    </div>
                    <div class="chatP">
                        <div class="chatL">头像</div>
                        <div class="chatR">
                            <p>名字</p>
                            <p>内容</p>
                        </div>
                    </div> -->
                    <div class="chatP" v-for="(item,index) in commentList">
                        <div class="chatL">

                            <img :src="item.user.avatarUrl" width="45px" height="45px"/>
                            头像
                        </div>
                        <div class="chatR">
                            <strong>{{item.user.nickname}}</strong>
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer audioPlayer">
            <div class="btn" @click="playpause">
                <img src="./img/play.png" class="play" alt=""/>
                <img src="./img/pause.png" class="pause" alt=""/>
            </div>
            
            <div class="time">
                <span class="currentTime">00:00</span>
                /
                <span class="totalTime">00:00</span>
            </div>
    
            <!-- <audio id="audio" src="./audio/Ghidorah - Toilet Story 4.mp3"></audio> -->
            <!-- <audio id="audio" :src="music_url" controls></audio> -->

            <div class="totalProgress">
                <div class="currentProgress"></div>
            </div>
            
            <div class="isSound"> 
                <img src="./img/play.png" class="play" alt=""/>
            </div>
        </div>    
        <div class="mvideo" v-show="isShowMv" v-drag >
            <div class="mvideo_head">
                <div class="mvideo_close" @click="close_mv">关闭</div>
            </div>
            <video :src="mv_url" style="width: 100%;height: 400px;background-color: black;" ref="video" controls="controls"></video>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                queryname:"",
                resultlist:[],
                music_img:"./img/img1.jpg",
                music_url:"",
                mid:"",
                commentList:[],
                isPlaying:false,
                mv_url:"",
                isShowMv:false
            },
            methods:{              
                getResult:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/search?keywords="+that.queryname).then(
                        function(response){
                            console.log(response);
                            that.resultlist = response.data.result;
                        },function(err){
                            console.log(err);
                        }
                    )
                },
                // selectM:function(img){
                //     console.log(img);
                //     this.music_img=img;
                // },
                getMusic_url:function(id){
                    var that = this;
                    axios.get("https://autumnfish.cn/song/url?id="+id).then(
                        function(response){
                            console.log(response);
                            that.music_url = response.data.data[0].url;
                        },function(err){
                            console.log(err);
                        }
                    )
                },
                getPic:function(id){
                    var that = this
                    axios.get("https://autumnfish.cn/song/detail?ids="+id).then(
                        function(response){       
                            console.log(response)
                            that.music_img=response.data.songs[0].al.picUrl;
                        },function(err){
                            console.log(err)
                        }
                    )
                },
                getComment:function(id){
                    var that = this;
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(
                        function(response){
                            console.log(response);
                            that.commentList=response.data.hotComments;
                        },function(err){
                            console.log(err)
                        }
                    )
                },
                play:function(){
                    console.log("play");
                    this.isPlaying = true;
                },
                pause:function(){
                    console.log("pause");
                    this.isPlaying = false;
                },
                playpause:function(){
                    if (audio.paused) { //判断当前的状态是否为暂停，若是则点击播放，否则暂停
                        audio.play();
                    }else{
                        audio.pause();
                    }
                },
                openMv:function(mvid){
                    var that = this;
                    axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(
                        function(response){
                            console.log(response)
                            that.mv_url = response.data.data.url
                            that.isShowMv = true
                            console.log(that.mv_url)
                        },
                        function(err){
                            console.log(err)
                        }
                    )
                },
                close_mv:function(){
                    this.isShowMv = false
                    this.$refs.video.pause()
                }
            },
            directives: {
                drag: {
                    // 指令的定义
                    bind: function(el) {
                        let oDiv = el;  // 获取当前元素
                        oDiv.onmousedown = (e) => {
                            console.log('onmousedown')
                            // 算出鼠标相对元素的位置
                            let disX = e.clientX - oDiv.offsetLeft;
                            let disY = e.clientY - oDiv.offsetTop;

                            document.onmousemove = (e) => {
                                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                                let left = e.clientX - disX;
                                let top = e.clientY - disY;

                                oDiv.style.left = left + 'px';
                                oDiv.style.top = top + 'px';
                                
                            };

                            document.onmouseup = (e) => {
                                document.onmousemove = null;
                                document.onmouseup = null;
                            }
                        }
                    }
                }
            },
        })
    </script>
</body>
</html>